{% extends 'ipad/base.html' %}

{% load staticfiles humanize %}

{% block content %}
<div class="order-form-controls row">
  <div class="col-sm-6">
    <div>{{ order.person }}</div>
  </div>
  
  <div class="col-sm-6">
    <div class="created">{{ order.created|date:'d M y H:i' }}</div>
  </div>
</div>

<table class="order-form table table-bordered">
  <thead>
    <tr>
      <th class="quantity">จำนวน</th>
      <th class="name">รายการ</th>
      <th class="unit">หน่วย</th>
      <th class="price">ราคา</th>
      <th class="total">รวม</th>
    </tr>
  </thead>

  <tfoot>
    <tr><td colspan="5" style="padding:10px 0 0;"><button id="add-product-btn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button></td></tr>

    <tr>
      <td colspan="3">
        <label>หมายเหตุ</label>
        <textarea id="id-note" class="form-control" data-baskets="{{ order.get_none_deposit_baskets_json }}">{{ order.notation }}</textarea>
      </td>
      <td>รวม<br/><br/>ชิ้น</td>
      <td class="summary"></td>
    </tr>
  </tfoot>
  
  <tbody>
    <tr><td colspan="5" style="padding:0;"></td></tr>
  {% for item in order.order_items.all %}
    <tr order-item-id="{{ item.pk }}" cost-per-unit="{{ item.cost_per_unit }}" product-id="{{ item.product.pk }}" product-type-id="{{ item.product.type.pk }}" {% if item.is_deleted %}class="deleted"{% endif %}>
      <td><a href="#qty">{{ item.quantity }}</a></td>
      <td class="name">{{ item.product.name }}</td>
      <td><a default="{{ item.product.unit }}" href="#unit">{{ item.unit|floatformat }}</a></td>
      <td><a default="{{ item.product.price_per_unit }}" href="#price">{{ item.price_per_unit|floatformat }}</a></td>
      <td><div class="total-wrapper"><span class="total">{{ item.total|floatformat|intcomma }}</span><div class="remove-product-btn-wrapper"><a class="remove-product-btn" href="#remove"><span class="glyphicon glyphicon-remove-circle"></span></a></div></div></td>
    </tr>
  {% endfor %}
  {% for item in order.get_deposit_baskets %}
    <tr product-id="{{ item.basket.pk }}" product-type-id="basket">
      <td>0</td>
      <td class="name">{{ item.basket.name }}</td>
      <td><a default="{{ item.basket.unit }}" href="#unit">{{ item.unit|floatformat }}</a></td>
      <td><a default="{{ item.basket.price_per_unit }}" href="#price">{{ item.price_per_unit|floatformat }}</a></td>
      <td><div class="total-wrapper"><span class="total">{{ item.total|floatformat|intcomma }}</span><div class="remove-product-btn-wrapper"><a class="remove-product-btn" href="#remove"><span class="glyphicon glyphicon-remove-circle"></span></a></div></div></td>
    </tr>
  {% endfor %}
  </tbody>
</table>

<div class="submit-wrapper">
  <button id="order-print-btn" class="btn btn-default" data-url="{% url 'ipad.order_print' id=order.pk %}">พิมพ์</button>
  <button id="order-delete-btn" class="btn btn-danger" data-url="{% url 'ipad.order_delete' id=order.pk %}">ลบ</button>
  <button id="order-submit-btn" type="submit" class="btn btn-primary" url="{% url 'api-edit-order' id=order.pk %}">บันทึก</button>
  <img class="hide" src="{% static 'ipad/images/loading.gif' %}" alt="loading">
</div>

{% include 'ipad/include/order-dialog.html' %}
{% endblock content %}

{% block script %}
  <script src="{% static 'ipad/js/order.js' %}"></script>
  <script src="{% static 'ipad/js/order-edit.js' %}"></script>
{% endblock script %}